<div id="mine">
    <el-card>
        <el-form :status-icon=true label-position="left" :model="rendata" label-width="130px">
            <img :src="rendata.photo" alt="">
            <el-form-item label="用户名" prop="username">
                <span>{{rendata.username}}</span>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <span>{{rendata.phone}}</span>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <span>{{rendata.email}}</span>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <span> {{sex[rendata.sex]}}</span>
            </el-form-item>
            <el-button size="mini" @click="dialogVisible = true">修改个人信息</el-button>
        </el-form>
    </el-card>
    <el-dialog title="修改个人信息" :visible.sync="dialogVisible" width="60%">
        <el-form ref="form" :model="rendata" label-width="120px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="rendata.username" name="username"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="rendata.phone" name="phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="rendata.email" name="email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-input v-model="sex[rendata.sex]" name="sex"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="xiugai">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#mine',
        data: function () {
            return {
                rendata: [],
                sex: ['', '男', '女', '保密'],
                dialogVisible: false,
                loading: true,
            }
        },
        methods: {
            xiugai: function (data) {//编辑个人信息
                var _this = this
                //  点击提交之后  
                _this.loading = true
                $.post('/ren/edit', {
                    id: _this.rendata.id,
                    username:_this.rendata.username,
                    phone:_this.rendata.phone,
                    email:_this.rendata.email,
                    sex:_this.rendata.sex,
                }, function (result) {
                    _this.$message({
                        type: 'success',
                        message: '编辑成功'
                    })
                    _this.dialogVisible = false
                    _this.loading = false
                })
            }
        },
        created: function () {
            var _this = this
            $.get('/ren/get', function (result) {
                if (result.error != 0) { return }
                _this.rendata = result.data[0]
                console.log(_this.rendata)
            })
        },
    })

</script>
<style>
    #mine form {
        width: 50%;
        margin: 0 auto;

    }

    #mine form button {
        margin-left: 100px;
    }
</style>